<template>
  <div class="panel-table">
    <div class="panel-table-header">
      <div style="width: 140px">变量名</div>
      <div>变量类型</div>
    </div>
    <div v-for="(item, i) in data" :key="i" class="mb-2">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <Icon
            class="mr-2"
            type="ios-arrow-down"
            size="14"
            v-if="item.outputlist && item.outputlist.length"
          />
          <div class="text-sm font-semibold text-black" style="width: 130px">
            {{ item.varname }}
          </div>
          <div
            class="py-1 ml-2 text-xs truncate rounded bg-slate-100"
            style="max-width: 80px"
          >
            {{ item.vartype }}
          </div>
        </div>

        <div class="flex items-center">
          <Icon
            type="md-resize"
            size="12"
            class="cursor-pointer"
            @click="handleShowDesc(i)"
          />
          <Icon
            type="md-add"
            @click="addOutput()"
            class="mx-3 cursor-pointer"
            v-if="i == 0"
          />
          <div v-else class="mx-3" style="width: 14px"></div>
          <Icon type="md-remove" class="cursor-not-allowed" />
        </div>
      </div>
      <div class="flex w-full" v-show="showDescList.includes(i)">
        <div
          class="line-left"
          v-if="item.outputlist && item.outputlist.length"
        ></div>
        <div class="w-full ml-1">
          <p class="text-xs">描述</p>
          <Input
            size="small"
            v-model="item.vardesc"
            class="w-full"
            placeholder="帮助大模型准确了解参数的作用"
          ></Input>
        </div>
      </div>
      <div
        class="flex items-center justify-between"
        v-for="(chlid, cIndex) in item.outputlist"
        :key="cIndex"
      >
        <div class="flex items-center">
          <div class="line"></div>
          <Input
            class="ml-1 mr-2"
            style="width: 130px"
            size="small"
            v-model="chlid.varname"
            check-strictly
            placeholder="输入变量名"
          >
          </Input>
          <Select size="small" v-model="chlid.vartype" style="width: 90px">
            <Option
              v-for="type in BE_TYPE_LIST"
              :value="type.value"
              :key="type.value"
              >{{ type.label }}</Option
            >
          </Select>
        </div>
        <div>
          <Icon
            type="md-remove"
            @click="removeOutput(cIndex)"
            class="cursor-pointer"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { BE_TYPE_LIST } from '../../lib/constant';

const emit = defineEmits(['add', 'remove']);

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const showDescList = ref([]);
const handleShowDesc = (i) => {
  if (showDescList.value.includes(i)) {
    const showIndex = showDescList.value.indexOf(i);
    showDescList.value.splice(showIndex, 1);
    return;
  }
  showDescList.value.push(i);
};

const addOutput = () => {
  emit('add');
};
const removeOutput = (index) => {
  emit('remove', index);
};
</script>
<style lang="scss">
.panel-table {
  .line {
    border-bottom: 1px solid #dadada;
    border-left: 1px solid #dadada;
    border-radius: 0 0 0 4px;
    height: 32px;
    transform: translate(6px, -14px);
    width: 15px;
  }
  .line-left {
    border-left: 1px solid #dadada;
    height: 40px;
    border-radius: 0 0 0 4px;
    transform: translate(6px, -8px);
    width: 15px;
  }
}
</style>
